import React, { useMemo,useContext,useEffect } from 'react'
import styles from './index.module.less'
import Panel from '../Panel'
import Widget from '../widget'
import PieWidget from '../PieWidget'
import { WidgetList, WidgetListProps, pieUrl,  } from '@/config'
import { columnsType } from '../Table'
import H2_1 from '@/assets/H2_1.png'
import { DatePicker, Input, Form } from 'antd'
import { useForm } from 'antd/es/form/Form'
import Table from '../Table'
import {Middle} from '../../App'
const { RangePicker } = DatePicker;
const MiddleContent = (props) => {
  const {onSubmit} = props
  const [form] = useForm()
  const ctx = useContext(Middle)
  useEffect(() => {
    form.setFieldsValue(ctx.initialValue)
  },[])

  const searchList = useMemo(() => {

    return [
      {
        name: 'time',
        child: <RangePicker  onChange={() => getTime()}></RangePicker>,
        label: '告警时间',
      },
      {
        name: 'ipAddess',
        child: <Input onChange={() => getTime()} placeholder='请输入告警IP' style={{ width: 170 }}></Input>,
        label: '',
      },
    ]
  }, [])
  const columns: columnsType[] = useMemo(() => {
    return [
      {
        dataIndex: 'index',
        title: '序号',

      },
      {
        dataIndex: 'IpAddress',
        title: 'IP地址',
      },
      {
        dataIndex: 'onlineTime',
        title: '最近一次在线时间',
      },
    ]
  }, [])

  const getTime = () => {
    onSubmit(form.getFieldsValue(true))
  }
  return (
    <div className={styles.middle}>
      <div>
        <Panel searchList={searchList} url={H2_1} form={form}></Panel>
        <Table columns={columns} data={ctx?.tableData}></Table>
      </div>
      <div style={{ width: `calc(100% - 560px)` }}>
        <div className={styles.widgetBox}>
          {
            WidgetList(ctx?.widget).map((i: WidgetListProps, d: number) => <Widget {...i} key={d}></Widget>)
          }
        </div>
        <div className={styles.widgetBox} style={{ marginTop: 26 }}>
          {
            pieUrl.map((k, i) => <PieWidget url={k} key={k + i} data={ctx?.widgetPie}></PieWidget>)

          }
        </div>
      </div>
    </div>
  )
}

export default React.memo(MiddleContent)